<%--
  Created by IntelliJ IDEA.
  User: reid
  Date: 2017/3/1
  Time: 下午3:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    request.setAttribute("basePath", basePath);
%>
<%@ include file="/resources/js/easyui/taglibs.jsp" %>
<%@ include file="/resources/js/easyui/_easyui.jsp" %>

<html>
<head>
    <title>消费记录</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <script type="text/javascript" src="${basePath}resources/js/wechat/js/jquery-2.1.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${basePath}resources/css/v2/member/common.css">
</head>
<body class="record_body">
<div class="loading"></div>
<%--<header style="text-indent:1rem;">--%>
    <%--<span>消费记录</span>--%>
<%--</header>--%>
<div class="page record_page">
    <ul class="record_title">
        <li>时间</li>
        <li>场地/设备</li>
        <li>类型/数量</li>
        <li>余币数</li>
        <li>结果</li>
    </ul>
    <div class="record_listdv" style="height:22.5rem;margin-bottom:6rem;">
        <c:forEach var="item" items="${result.rows}" varStatus="index">
            <ul class="record_list">
                <li>
                    <p><fmt:formatDate pattern="yyyy-MM-dd" value="${item.createtime}"/></p>
                    <p><fmt:formatDate pattern="HH:mm:ss" value="${item.createtime}"/></p>
                </li>
                <li>
                    <p>${item.placename}</p>
                    <p>${item.devicename}</p>
                </li>
                <li>
                    <c:choose>
                        <c:when test="${item.ctype == 1}">
                            购币
                        </c:when>
                        <c:when test="${item.ctype == 2}">
                            投币
                        </c:when>
                        <c:when test="${item.ctype == 3}">
                            购物
                        </c:when>
                        <c:when test="${item.ctype == 4}">
                            积分兑换
                        </c:when>
                        <c:when test="${item.ctype == 5}">
                            彩票兑换
                        </c:when>
                        <c:when test="${item.ctype == 6}">
                            得分兑换积分
                        </c:when>
                    </c:choose>：${item.quantity}</li>
                <li>${item.coin}</li>
                <li>${item.resulttext}</li>
                <input type="hidden" value="${item.memberid}"/>
            </ul>
        </c:forEach>
    </div>
</div>

<div class="record_footer">
    <a class="record_prev cur" href="javascript:;">上一页</a>
    <a class="record_returnbtn" href="javascript:;">返回</a>
    <a class="record_next" href="javascript:;">下一页</a>
</div>
</body>
</html>
<script>
    var page = 1;

    window.onload = function () {
        $(".loading").hide();
        <%--if (${result.total <= page * 6}){--%>
            <%--$(".record_next").addClass("cur");--%>
        <%--}--%>
        <%--if (${result.rows.length < 6}) {--%>
            <%--$(".record_next").addClass("cur");--%>
        <%--}--%>
        <%--alert(${result.total});--%>
    };

    //上一页
    $(".record_prev").on("click", function () {
        if($(this).hasClass("cur")) {
           return;
        }

        if (page > 1) {
            page = page - 1;
            queryData(page);
            $(".record_next").removeClass("cur");
        }

        $(".record_page").removeClass("record_page_prev record_page_next");
        $(this).closest("body").find(".record_page").addClass("record_page_prev");

        setTimeout(recordPage, 400);
    });

    //下一页
   $(".record_next").on("click", function () {
       if($(this).hasClass("cur")){
          return;
       }

       if (${result.total <= page * 6}){
           $(".record_prev").addClass("cur");
       }

       page = page + 1;

       queryData(page);

       $(".record_prev").removeClass("cur");

       $(".record_page").removeClass("record_page_prev record_page_next");
       $(this).closest("body").find(".record_page").addClass("record_page_next");
       setTimeout(recordPage, 400);
    });

    function recordPage() {
        $(".record_page").removeClass("record_page_prev record_page_next");
    }

    //返回
    $(".record_returnbtn").on("click", function () {
        $(this).closest("body").find(".record_page").addClass("record_return");
        setTimeout(recordReturn, 400);
    });

    function recordReturn() {
        $(".record_page").removeClass("record_return");
        window.history.go(-1);
    }

    function queryData(page) {
        var memberId = $(".record_listdv .record_list:eq(0)").find("input").val();
        var url = '${basePath}web/pUBConsumption/page.json';

        $.ajax({
            url: url,
            type: "POST",
            data: {memberid: memberId, page: page, rows: 6},
            dataType: "json",
            cache: false,
            success: function (ret) {
                if (ret.rows.length > 0) {
                    renderData(ret);
                }

                if (ret.rows.length < 6) {
                    $(".record_next").addClass("cur");
                }
            }
        });
    }

    function renderData(data) {
        $(".record_listdv").empty();
        var ul = '';
        for (var index in data.rows) {
            var createtime = new Date(data.rows[index]["createtime"]).format("yyyy-MM-dd hh:mm:ss");
            var dateStr = createtime.substring(0, 10);
            var timeStr = createtime.substring(10, 19);

            var cType = data.rows[index]["ctype"];
            var cTypeName = '';
            if (cType == 1){
                cTypeName = '购币';
            }else if (cType == 2){
                cTypeName = '投币';
            }else if (cType == 3){
                cTypeName = '购物';
            }else if (cType == 4){
                cTypeName = '积分兑换';
            }else if (cType == 5){
                cTypeName = '彩票兑换';
            }else if (cType == 6){
                cTypeName = '得分兑换积分';
            }

            ul += '<ul class="record_list">';
            ul += '<li>';
            ul += '<p>' + dateStr + '</p>';
            ul += '<p>' + timeStr + '</p>';
            ul += '</li>';
            ul += '<li>';
            ul += '<p>' + data.rows[index]["placename"] + '</p>';
            ul += '<p>' + data.rows[index]["devicename"] + '</p>';
            ul += '</li>';
            ul += '<li>' + cTypeName + '：' + data.rows[index]["quantity"] + '</li>';
            ul += '<li>' + data.rows[index]["coin"] + '</li>';
            ul += '<li>' + data.rows[index]["resulttext"] + '</li>';
            ul += '<input type="hidden" value="' + data.rows[index]["memberid"] + '"/>';
            ul += '</ul>';
        }
        $(".record_listdv").append(ul);

        if (page <= 1){
            $(".record_prev").addClass("cur");
        }

    }

</script>
